<template>
	<!-- 自定义导航栏 -->
	<CustomNavBar title="找队伍,快来寻找你感兴趣的队伍" />
	<up-search v-model="value" placeholder="请输入搜索关键词" @search="onSearch"></up-search>

	<up-tabs :list="list1" v-model:active="active" @click='onTabChange' class="custom-tabs"></up-tabs>
	<TeamCardList :team-list="teamList" />
	<view class='iconBox'>
		<up-icon name="plus" color="#fff" size="28" @click="doTeamAdd"></up-icon>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import myAxios from "@/plugins/myAxios"; // uni-app兼容的自定义axios
	import CustomNavBar from '@/components/CustomNavBar.vue';
	import TeamCardList from "@/components/TeamCardList.vue";
	import {
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	const teamList = ref([]);
	const searchText = ref("");
	const active = ref("public");
	const value = ref('')
	const list1 = ref([{
			name: "公开",
			title: "public"
		},
		{
			name: "加密",
			title: "secret"
		},
	]);
	/**
	 * 创建队伍
	 */
	const doTeamAdd = () => {
		uni.navigateTo({
			url: "/pages/team/add", // 路径改为uni-app的页面路径
		});
	};

	/**
	 * 加载队伍信息
	 * @param val
	 * @param state
	 * @returns {Promise<void>}
	 */
	const listTeam = async (val = "", state = 0) => {
		try {
			const res = await myAxios.get("/team/list", {
				params: {
					searchText: val,
					teamState: state,
				},
			});
			if (res && res.data) {
				teamList.value = res.data;
			} else {
				uni.showToast({
					title: "加载队伍失败",
					type: "error"
				});
			}
		} catch (error) {
			uni.showToast({
				title: "加载队伍失败",
				type: "error"
			});
		}
	};

	/**
	 * 队伍状态查询切换
	 * @param name
	 */
	const onTabChange = (name) => {
		console.log(name)
		if (name.title === "public") {
			active.value = "public";
			listTeam(searchText.value, 0);
		} else {
			active.value = "secret";
			listTeam(searchText.value, 2);
		}
	};

	/**
	 * 页面渲染时加载队伍
	 */
	onMounted(async () => {
		listTeam();
	});

	/**
	 * 关键词搜索队伍（队伍名+队伍描述）
	 */
	const onSearch = (val) => {
		listTeam(val);
	};

	const onRefresh = () => {
		setTimeout(() => {
			loading.value = false;
			onTabChange(active.value);
		}, 1000);
	};
		onPullDownRefresh(() => {
			// console.log("下来了")
			// setTimeout(() => {
			// 	loading.value = false;
			// 	onTabChange(active.value);
			// 	uni.stopPullDownRefresh(); // 停止下拉刷新动画
			// }, 1000);
		});
</script>

<style scoped>
	.iconBox {
		position: fixed;
		/* 固定定位 */
		bottom: 20px;
		/* 距离页面底部 */
		right: 20px;
		/* 距离页面右侧 */
		z-index: 999;
		/* 确保在最上层 */
		width: 60px;
		/* 宽度 */
		height: 60px;
		/* 高度 */
		display: flex;
		/* 使用 flex 布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		background-color: #49a1ff;
		/* 背景色 */
		border-radius: 50%;
		/* 圆形按钮 */
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		/* 阴影效果 */
		border: 1px solid #e5e5e5;
		/* 边框 */
	}

	.iconBox:active {
		transform: scale(0.95);
		/* 点击时缩小效果 */
		transition: transform 0.1s ease-in-out;
	}
</style>